<template>
<view>
<!--pages/tools/allServices/allServices.wxml-->
<!--<import src="../../webview/contact.wxml"></import>-->
<!-- <template is="inContact" data="{{showtk}}" /> -->
<view>
  <view class="navbar" :style="'padding-top:' + navtop + 'px;'">
    <view class="search flex-row">
      <navigator class="back" open-type="navigateBack" hover-class="none">
        <image src="/static/images/tools/left_back.png" mode class="left-img"></image>
      </navigator>
      <view class="input-box">
        <input type="text" :value="keywords" placeholder="请输入服务名称" @confirm="inputConfirm" @input="inputTap" :style="'height:' + inputHeight + 'px'">
        <image src="/static/images/index/sousuo.png" mode></image>
      </view>
    </view>
    <view class="scolls" :hidden="showRes">
      <view style="padding: 0 40rpx;">
        <scroll-view scroll-x="true" scroll-with-animation="true" :scroll-into-view="toView">
          <block>
            <view class="blockbox">
              <view v-for="(item, index) in allData" :key="index" class="flex-col chax" @tap="menuClick" :id="'L'+index" :data-index="index">
                <text :class="menuIndex == index?'seltext':'noseltext'">{{item.name}}</text>
                <view class="line" v-if="menuIndex == index"></view>
              </view>
            </view>
          </block>
        </scroll-view>
      </view>
    </view>
  </view>

  <view class="content" :hidden="showRes">
    <scroll-view scroll-y="true" scroll-with-animation="true" :scroll-into-view="toView1" @scroll="scroll">
      <view class="chaxunHeight" :style="'height:' + (clientHeight-topHeight) + 'px'">
        <view v-for="(all, index) in allData" :key="index" class="chaxun-box" :id="'L'+index" :style="'min-height:' + ((index==4)?(clientHeight-topHeight):'') + 'px'">
          <view class="chaxname">{{all.name}}</view>
          <view class="cx-items">
            <view v-for="(item, index2) in all.info" :key="index2" class="items flex-col" @tap="navDetail" :data-stitle="item.stitle" :data-path="item.path" :data-title="item.title" :data-appid="item.appid">
              <image :src="item.logo" mode></image>
              <text>{{item.stitle}}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>

  <view :style="'padding-top:' + (topHeight-searchHeight) + 'px'" v-if="showRes" class="res-style">
    <view class="cx-items">
      <view v-for="(item, index) in serachRes" :key="index" class="items flex-col" @tap="navDetail" :data-stitle="item.stitle" :data-path="item.path" :data-title="item.title" :data-appid="item.appid">
        <image :src="item.logo" mode></image>
        <text>{{item.stitle}}</text>
      </view>
    </view>
    <!-- null-->
    <view class="null-box" v-if="serachRes==''&&keywords!=''">
      <image src="http://imgbdb3.bendibao.com/xcx/202011/13/20201113155035_59183.png"></image>
      <view class="texts">抱歉，没有找到
        <text style="color:#f60">{{keywords}}</text> 相关结果。</view>
      <view class="texts">建议您尝试更换检索词！</view>
    </view>
  </view>
</view>
</view>
</template>

<script>
// pages/tools/allServices/allServices.js
const app = getApp();
const util = require("../../../utils/util.js");
var sIndex = "";

export default {
  data() {
    return {
      showtk: false,
      showRes: false,
      allData: [{
        name: "政务办事",
        info: []
      }, {
        name: "教育办事",
        info: []
      }, {
        name: "交通出行",
        info: []
      }, {
        name: "车辆服务",
        info: []
      }, {
        name: "民生服务",
        info: []
      }],
      allservList: [],
      menuIndex: 0,
      count: 0,
      tabHeight: [],
      keywords: "",
      toView: "",
      toView1: "",
      serachRes: [],
      navtop: "",
      inputHeight: "",
      topHeight: "",
      searchHeight: "",
      winHeight: "",
      clientHeight: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (opt) {
    //获取胶囊位置信息
    let menuButtonObject = uni.getMenuButtonBoundingClientRect();
    this.setData({
      navtop: menuButtonObject.top,
      inputHeight: menuButtonObject.height
    });
    sIndex = opt.menuIndex ? opt.menuIndex : 0; // 获取顶部的距离

    var query = uni.createSelectorQuery();
    query.select('.navbar').boundingClientRect(res => {
      this.setData({
        topHeight: res.height
      });
    }).exec(); // 获取顶部搜索的距离

    var query = uni.createSelectorQuery();
    query.select('.search').boundingClientRect(res => {
      this.setData({
        searchHeight: res.height
      });
    }).exec(); // 获取屏幕高度

    uni.getSystemInfo({
      success: res => {
        var clientHeight = res.windowHeight,
            clientWidth = res.windowWidth,
            rpxR = 750 / clientWidth;
        var calc = clientHeight * rpxR;
        this.setData({
          winHeight: calc,
          clientHeight
        });
      }
    });
    util.getUrl(app.globalData.url).then(res => {
      this.allData.forEach((v, k) => {
        this.getallBsy(v.name, k);
      });
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    menuClick(e) {
      let menuIndex = e.currentTarget.dataset.index;
      this.setData({
        menuIndex,
        toView1: 'L' + menuIndex
      });
    },

    // 全部办事
    getallBsy(type, index) {
      let toolData = {
        action: "tools",
        city: uni.getStorageSync("city"),
        keywords: "",
        version: app.globalData.version,
        type
      };
      util.request('service.php', toolData).then(res => {
        let resData = res.data.data;
        this.count++;
        this.allData[index].info = resData;
        this.setData({
          allData: this.allData
        });

        if (this.count == this.allData.length) {
          this.setData({
            allData: this.allData
          });
          this.allData.forEach((v, k) => {
            var query = uni.createSelectorQuery();
            setTimeout(() => {
              query.select('#L' + k + '.chaxun-box').boundingClientRect(res => {
                if (res) {
                  this.tabHeight.push(res.height);
                  this.setData({
                    tabHeight: this.tabHeight
                  });
                }
              }).exec();
            }, 200);

            if (v.info && v.info.length >= 1) {
              v.info.forEach(item => {
                this.allservList.push(item);
                this.setData({
                  allservList: this.allservList
                });
              });
            }
          });
          this.setData({
            menuIndex: sIndex
          });
          this.setData({
            toView: 'L' + this.menuIndex
          });
          this.setData({
            toView1: this.toView
          });
        }
      });
    },

    scroll: function (e) {
      let scrollViewTop = e.detail.scrollTop;
      let tabHeight = this.tabHeight;
      var scroArr = [];
      var currNum = 0;
      tabHeight.forEach((item, index) => {
        if (index == 0) {
          scroArr.push(tabHeight[index]);
        } else {
          if (currNum) {
            currNum = tabHeight[index] + currNum;
          } else {
            currNum = tabHeight[index] + tabHeight[index - 1];
          }

          scroArr.push(currNum);
        }
      });
      let lastIndex = tabHeight.length - 1;

      for (let i = 0; i < scroArr.length; i++) {
        if (scrollViewTop >= 0 && scrollViewTop < scroArr[i]) {
          this.setData({
            menuIndex: 0,
            toView: 'L' + 0
          });
          return;
        } else if (scrollViewTop >= scroArr[i] && scrollViewTop < scroArr[i + 1]) {
          this.setData({
            menuIndex: i + 1,
            toView: 'L' + (i + 1)
          });
          return;
        } else if (scrollViewTop >= scroArr[scroArr.length - 1]) {
          this.setData({
            menuIndex: scroArr.length - 1,
            toView: 'L' + (scroArr.length - 1)
          });
          return;
        }
      }
    },

    // 服务点击
    navDetail(e) {
      let path = e.currentTarget.dataset.path;
      let linkname = e.currentTarget.dataset.title;
      let appid = e.currentTarget.dataset.appid;
      let title = e.currentTarget.dataset.title;

      if (path.indexOf("pages") == -1 && path.indexOf("mp.weixin.qq.com") == -1) {
        this.setData({
          showtk: true
        });
        util.navContact(linkname, path);
      } else {
        let scene = util.getScene(uni.getLaunchOptionsSync().scene);
        util.navMethod(path, appid, title, scene);
      }
    },

    // 搜索
    inputConfirm(e) {},

    inputTap(e) {
      let keywords = e.detail.value;
      let serachRes = [];
      serachRes = this.allservList.filter(v => {
        if (v.title.includes(keywords)) {
          return v;
        }
      });
      this.setData({
        keywords,
        serachRes
      }); // this.serachRes.length >= 1

      if (this.keywords != '') {
        this.setData({
          showRes: true
        });
      } else {
        this.setData({
          showRes: false
        });
      }

      if (this.keywords === '') {
        this.setData({
          serachRes: [],
          showRes: false
        });
      }
    }

  }
};
</script>
<style>
/* pages/tools/allServices/allServices.wxss */

.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flex-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.navbar {
    position: fixed;
    background-color: #fff;
    z-index: 1;
    width: 100%;
}

.search {
    margin: 0 40rpx;
}

.back {
    width: 60rpx;
}

.left-img {
    width: 11px;
    height: 19px;
    z-index: 10;
}

.input-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0rpx 25rpx;
    background: #f5f5f5;
    border-radius: 32rpx;
    width: 366rpx;
    font-size: 27rpx;
}

.input-box image {
    width: 34rpx;
    height: 34rpx;
    float: right;
}

.scolls {
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
    margin-top: 30rpx;
    z-index: 1;
}

.blockbox {
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

.chax {
    margin-right: 60rpx;
}

.seltext {
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    color: #242424;
    margin-bottom: 15rpx;
}

.noseltext {
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    color: #828282;
    margin-bottom: 22rpx;
}

.line {
    border-bottom: 12rpx solid #f60;
    width: 46rpx;
    border-radius: 40rpx;
}

.content {
    margin-right: 30rpx;
    margin-left: 30rpx;
    padding-top: 300rpx;
}

.chaxun-box {
    margin-bottom: 50rpx;
}

.chaxun-box:last-child {
    margin-bottom: 0;
}

.chaxname {
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: bold;
    color: #242424;
}

.res-style {
    margin: 0 40rpx;
}

.cx-items {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* justify-content: center; */
    flex-wrap: wrap;
    /* margin-bottom: 50rpx; */
}

.items {
    margin-right: 63rpx;
    margin-top: 40rpx;
}

.items:nth-child(4n) {
    margin-right: 0;
}

.items image {
    width: 90rpx;
    height: 90rpx;
}

.items text {
    width: 60px;
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: center;
    color: #545454;
    margin-top: 15rpx;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

.res-style {
    margin: 0 40rpx;
}

.cx-items {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
}

.cx-items .items {
    margin-right: 64rpx;
    margin-top: 40rpx;
}

.cx-items .items:nth-child(4n) {
    margin-right: 0;
}

.cx-items .items image {
    width: 90rpx;
    height: 90rpx;
}

.cx-items .items text {
    max-width: 120rpx;
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: center;
    color: #545454;
    margin-top: 15rpx;
}

.null-box {
    text-align: center;
    margin-top: 400rpx;
}

.null-box image {
    width: 422rpx;
    height: 268rpx;
}

.texts {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: center;
    color: #a7a6a6;
    margin-top: 26rpx;
}

@media (min-width: 480px) {
    .cx-items .items {
        margin-right: 96rpx;
    }
}

@media (min-width: 768px) {
    .cx-items .items {
        margin-right: 110rpx;
    }
    .cx-items .items text {
        width: 72rpx;
        font-size: 20rpx;
    }
    .content {
        padding-top: 170rpx;
    }
}
</style>